<!--
  租约确认
-->
<template lang="html">
  <div class="leaseConfirm-warp">
    <!-- 租期选择 -->
    <section>
      <group>
        <datetime
          v-model="startTime"
          placeholder="年/月/日"
          :display-format="format"
          :start-date="startDate"
          @on-change="startTimeChange"
          title="起租时间">
        </datetime>
        <div class="divide choice-tenancy my-cell">
          <p class="cell-title">快速选择租期</p>
          <div class="periods">
            <p
              v-for="item in periods"
              :class="{active: periodValue === item.value}"
              :key="item.value"
              @click="choiceTenancy(item.value)">{{item.label}}</p>
          </div>
        </div>
        <datetime
          v-model="endTime"
          placeholder="年/月/日"
          :display-format="format"
          readonly
          title="退租时间">
        </datetime>
      </group>
    </section>
    <!-- 付款方式 -->
    <section>
      <div class="my-cell">
        <p class="cell-title">付款方式</p>
        <div class="payments">
          <p
            v-for="item in payments"
            :class="{active: paymentValue === item.value}"
            :key="item.value"
            @click="paymentValue = item.value">{{item.label}}</p>
        </div>
      </div>
    </section>
    <!-- 押金 -->
    <section>
      <div class="my-cell">
        <p class="cell-title">押金</p>
        <ul class="check-group">
          <li class="active">
            <i></i>
            <div class="top">
              <p>{{betNumSwitch(betNum)}}</p>
              <p class="price">￥{{betPrice}}元</p>
            </div>
            <div style="color: #999;">
              <span>传统模式，到期可退</span>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <div class="next-step">
      <x-button type="primary" @click.native="nextStep">下一步</x-button>
    </div>
  </div>
</template>

<script>
import { Datetime } from 'vux'
import moment from 'moment'
export default {
  components: {
    Datetime
  },
  data () {
    return {
      // 分数未达到诚信免押
      unqualified: false,
      // 起租时间可以开始选择的日期
      startDate: moment().add(1, 'days').format('YYYY-MM-DD'),
      // 选择后的起租时间
      startTime: '',
      // 退租时间
      endTime: '',
      // 日期显示格式化
      format (val) {
        let strArr = val.split('-')
        return `${strArr[0]}年${strArr[1]}月${strArr[2]}日`
      },
      // 租期
      periods: [
        {
          value: 1,
          label: '一个月'
        },
        {
          value: 3,
          label: '三个月'
        },
        {
          value: 6,
          label: '半年'
        },
        {
          value: 12,
          label: '一年'
        }
      ],
      // 选中的租期
      periodValue: 0,
      // 付款方式
      payments: [
        {
          value: 1,
          label: '月付'
        }
        // {
        //   value: 3,
        //   label: '季度付'
        // },
        // {
        //   value: 6,
        //   label: '半年付'
        // }
      ],
      // 选中的付款方式
      paymentValue: 1,
      betNum: 1,
      // 押金金额
      betPrice: 0
    }
  },
  methods: {
    betNumSwitch (betNum) {
      let txt = ''
      switch (betNum) {
        case 1: txt = '押一'; break
        case 2: txt = '押二'; break
        case 3: txt = '押三'; break
      }
      return txt
    },
    // 起租时间发生变化时，触发 choiceTenancy 方法，计算退租时间
    startTimeChange () {
      this.periodValue && this.choiceTenancy(this.periodValue)
    },
    // 选择租期时，计算退租时间
    choiceTenancy (periodValue) {
      if (this.startTime) {
        this.periodValue = periodValue
        this.endTime = moment(this.startTime, 'YYYY-MM-DD').add(periodValue, 'months').format('YYYY-MM-DD')
      } else {
        this.$vux.toast.text('请先选择起租时间')
      }
    },
    // 点击下一步时，检验数据
    checkData () {
      if (!this.startTime) {
        this.$vux.toast.text('请选择起租时间')
        return false
      } else if (!this.endTime) {
        this.$vux.toast.text('请选择退租时间')
        return false
      } else if (!this.paymentValue) {
        this.$vux.toast.text('情选择付款方式')
        return false
      }
      return true
    },
    // 下一步
    nextStep () {
      if (this.checkData()) {
        let leaseInfo = {
          startDate: this.startTime, // 起租时间
          periodValue: this.periodValue, // 快速选择的租期
          endDate: this.endTime, // 退租时间
          payment: this.paymentValue // 付款方式
        }
        window.localStorage.setItem('leaseInfo', JSON.stringify(leaseInfo))
        this.$router.push('/leaseInfoConfirm')
      }
    }
  },
  created () {
    // 回填信息
    let leaseInfo = JSON.parse(window.localStorage.getItem('leaseInfo') || '{}')
    if (leaseInfo) {
      // this.startTime = leaseInfo.startDate // 起租时间
      // this.endTime = leaseInfo.endDate // 退租时间
      this.periodValue = leaseInfo.periodValue // 租期
      this.paymentValue = leaseInfo.payment // 付款方式
    }
    // 只通过房源数据获取押金
    let houseInfo = JSON.parse(window.localStorage.getItem('signHouseInfo') || '{}')
    let {betNum, rentalPrice} = houseInfo
    this.betNum = betNum // 押金方式
    this.betPrice = betNum * rentalPrice // 押金
  }
}
</script>

<style lang="less">
.leaseConfirm-warp{
  padding-bottom: 6px;
  background-color: #f4f4f4;
  section{
    margin-bottom: 6px;
    padding: 5px 15px 0;
    background-color: #fff;
    &:nth-last-of-type(1){
      margin-bottom: 0;
    }
  }
  .my-cell{
    padding: 10px 0;
  }
  .cell-title{
    font-size: 14px;
    color: #000;
  }
  .divide{
    position: relative;
    box-sizing: border-box;
    &::before{
      content: " ";
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 1px;
      border-top: 1px solid #D9D9D9;
      color: #D9D9D9;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
  .check-group{
    li{
      position: relative;
      height: 72px;
      padding: 10px 0 15px 28px;
      box-sizing: border-box;
      i{
        position: absolute;
        left: 0;
        top: 15px;
        width: 17px;
        height: 17px;
        border: 1px solid #e3e3e3;
        border-radius: 50%;
        box-sizing: border-box;
      }
      &.active{
        i{
          background: #ff9600;
          border: 0;
          &::before{
            content: "";
            position: absolute;
            top: 5px;
            left: 4px;
            width: 7px;
            height: 3px;
            border-left: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(-45deg);
          }
        }
      }
      &.disabled{
        color: #666;
        cursor: not-allowed;
      }
    }
    .top{
      display: flex;
      justify-content: space-between;
      line-height: 25px;
      font-size: 14px;
    }
    .price{
      color: #777;
    }
    div{
      font-size: 12px;
      width: 100%;
    }
  }
  .periods, .payments{
    display: flex;
    margin-top: 7px;
    flex-wrap: wrap;
    justify-content: space-between;
    p{
      margin-top: 10px;
      width: 30%;
      line-height: 30px;
      text-align: center;
      color: #585858;
      border: 1px solid #bbb;
      border-radius: 2px;
      box-sizing: border-box;
      &.active{
        color: #ff7358;
        border-color: #ff3c00;
      }
    }
  }
  .weui-cells{
    font-size: 14px;
    color: #000;
    &::before, &::after{
      display: none;
    }
    .weui-cell{
      height: 45px;
      padding: 15px 0;
      box-sizing: border-box;
    }
    &.vux-no-group-title{
      margin-top: 0;
    }
  }
  .next-step{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
</style>
